<template>
	<view>
		<view class="header-bg"></view>
		<view class="list">
			<view class="offer-box main-content">
				<view class="offer-title-red" v-if="taskInfo.rewardStatus == 0">未领取任务</view>
				<view class="offer-title-red" v-else-if="taskInfo.rewardStatus == 1">{{shareInfo.title }}</view>
				<view class="mian-center acea-row row-between" v-if="[1,2].includes(taskInfo.type)" @click="toTz">
					<view class="center-left">
						<p>面积：{{ fbInfo.area || 0 }}㎡</p>
						<p>租金：{{ fbInfo.rent || 0 }}元</p>
						<p>{{item.categoryNameitem.categoryName || ''}}</p>
						<!-- <p>期望经营：20-50</p> -->
					</view>
				</view>
				<view class="offer-info" @click="toTz" v-else-if="taskInfo.type==0">
					<view class="title">{{ fbInfo.title }}</view>
					<view class="acea-row row-middle pd-t-30">
						<view class="pic">
							<image :src="fbInfo.shopfrontPhoto?fbInfo.shopfrontPhoto.split(',')[0]:''" mode=""></image>
						</view>
						<view class="info-txt">
							<view class="">面积：{{ fbInfo.avea || fbInfo.area || 0}}㎡</view>
							<view class="">租金：{{ fbInfo.rent || 0 }}元</view>
							<view class="">转让费：{{ fbInfo.transferFee || 0 }}万元</view>
							<!-- 						<view class="" >适合行业：{{ fbInfo.workingGroup }}</view>
							<view class="" v-if="fbInfo.category_id">计划经营：{{ fbInfo.category_id }}</view> -->
						</view>
					</view>
				</view>
				<view class="offer-info" v-else-if="taskInfo.type == 3">
					<view>
						<!-- 					<view class="">店铺名称：{{ fbInfo.storeName }}</view> -->
						<view class="">招聘人数：{{ fbInfo.number || 0 }}人</view>
						<view class="">薪资待遇：{{ fbInfo.salary || 0 }}K</view>
						<view class="">经验要求：{{ fbInfo.experience }}</view>
					</view>
				</view>
			</view>

			<view class="info-box offer-box">
				<view class="title">悬赏信息</view>
				<!-- 				<view class="acea-row row-middle">
					<view class="label">成功时间</view>
					<view class="text">2022-5-25 20:30：45</view>
				</view> -->
				<view class="acea-row row-middle">
					<view class="label">交易形式</view>
					<view class="text">金币</view>
				</view>
				<view class="acea-row row-middle">
					<view class="label">悬赏时间</view>
					<view class="text">{{taskInfo.addTime || taskInfo.createTime || taskInfo.create_time ||''}}</view>
				</view>
				<view class="acea-row row-middle">
					<view class="label">悬赏现金</view>
					<view class="text">{{taskInfo.rewardAmount || taskInfo.reward_amount || ''}}元</view>
				</view>
				<view class="acea-row row-middle">
					<view class="label">是否托管</view>
					<view class="text">{{taskInfo.trusteeship == 1?'已托管平台':'未托管平台'}} </view>
				</view>
				<view class="acea-row row-middle">
					<view class="label">悬赏金币</view>
					<view class="text">{{taskInfo.coin?taskInfo.coin:0}}个</view>
				</view>
				<view class="acea-row row-middle">
					<view class="label">推广语</view>
					<view class="text">{{taskInfo.generalization || ''}}</view>
				</view>
			</view>

		</view>
		<view class="uni-p-b-98"></view>
		<view class="acea-row row-right row-middle footer">
			<!-- <button  @click="toReceive" class="white-btn" v-if="taskInfo.rewardStatus == 1">继续分享</button> -->
			<button open-type="share" v-if="taskInfo.rewardStatus == 1">继续分享</button>
			<view class="red-btn" v-if="!taskInfo.rewardStatus" @click="toReceive">
				{{getStatus[taskInfo.rewardStatus]?getStatus[taskInfo.rewardStatus]:'立即领取'}}
			</view>
			<view class="red-btn"
				v-else="!taskInfo.rewardStatus||taskInfo.rewardStatus=='1' ||taskInfo.rewardStatus=='0'"
				@click="toReceive">{{getStatus[taskInfo.rewardStatus]?getStatus[taskInfo.rewardStatus]:'立即领取'}}</view>
		</view>
	</view>
</template>

<script>
	import {
		toPage
	} from '@/filters/commFilter.js'
	import {
		RewardDetailApi,
	} from '@/api/reward.js'
	import {
		ShopRentDetailApiNoDw
	} from '@/api/subletOfShop.js'
	import {
		addReawardUser
	} from '@/api/api.js'
	export default {
		data() {
			return {
				isGet: true,
				taskId: '',
				taskInfo: {},
				fbInfo: {},
				getStatus: {
					0: '立即领取',
					1: '任务进行中',
					2: '已完成'
				},
				shareInfo: {
					title: '',
					infoId: "",
					infoType: "",
					sharePath: '',
					img: ''
				}
			};
		},
		onLoad(options) {
			this.isGet = options.isGet == 'true' ? true : false
			this.taskInfo = JSON.parse(options.fbInfo);
			console.log('taskInfo', this.taskInfo)
			this.fbInfo = this.taskInfo.managementResponse;

			if (this.fbInfo.id) {
				this.shareInfo.infoId = this.fbInfo.id
			} else if (this.fbInfo.askrentId) {
				this.shareInfo.infoId = this.fbInfo.askrentId
			} else if (this.fbInfo.buystoreId) {
				this.shareInfo.infoId = this.fbInfo.buystoreId
			}
			this.shareInfo.infoType = this.taskInfo.type;
			this.shareInfo.title = '悬赏' + (this.taskInfo.rewardAmount ? parseInt(this.taskInfo.rewardAmount) + '元' : '') +
				this.fbInfo.title;
			let re = this.separateVideosAndImages(this.fbInfo.shopfrontPhoto ? this.fbInfo.shopfrontPhoto.split(',') : [])
			// this.shareInfo.img = re.imageArray.length>0?re.imageArray[0]:''
			this.shareInfo.sharePath = this.getPath()
			this.shareInfo.infoType = this.getType()

		},
		methods: {
			toPage,
			//获取悬赏任务
			getTask() {
				RewardDetailApi(this.taskId).then(res => {
					this.taskInfo = res.data
					console.log('taskInfo', this.taskInfo)

				})
			},
			separateVideosAndImages(inputArray) {
				const videoArray = [];
				const imageArray = [];

				const videoExtensions = /\.(mp4|avi|mov)$/i;
				const imageExtensions = /\.(jpg|jpeg|png|gif)$/i;

				inputArray.forEach(item => {
					const extension = item.match(/\.[0-9a-z]+$/i)[0];

					if (extension.match(videoExtensions)) {
						videoArray.push(item);
					} else if (extension.match(imageExtensions)) {
						imageArray.push(item);
					}
				});

				return {
					videoArray,
					imageArray
				};
			},
			//接取任务
			addRdu() {
				addReawardUser({
					reward: this.taskInfo.infoId
				}).then(res => {
					console.log(res)
				})
			},
			//领取任务
			toReceive() {
				let that = this;
				console.log('123', that.taskInfo)
				if (this.taskInfo.rewardStatus == 1) {
					this.toTz();
					return;
				}
				uni.showModal({
					title: '提示',
					content: '是否领取悬赏任务',
					success: function(res) {
						if (res.confirm) {
							that.receiveTask()

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			receiveTask() {
				addReawardUser({
					reward: this.taskInfo.id
				}).then(res => {
					if (res.code == 200) {
						this.taskInfo.status = 1;
						this.isGet = true;
						this.toTz();
					}
				})
			},
			toTz() {
				let pathTo = this.getPath();
				console.log([0, 8].includes(this.taskInfo.type), this.taskInfo)
				let taskType = Number(this.taskInfo.type)
				if ([1, 2].includes(taskType)) {
					pathTo = pathTo + '?' + (this.fbInfo.buystoreId ? 'buystoreId=' : 'askrentId=') + (
							this.fbInfo.buystoreId ? this.fbInfo.buystoreId : this.fbInfo.askrentId) + '&storeCategory=' + this
						.taskInfo.storeCategory
				} else if ([0, 8].includes(taskType)) {
					pathTo = pathTo + '?id=' + this.fbInfo.id + '&storeCategory=' + this.fbInfo.storeCategory +
						'&status=' + this.fbInfo.status + '&types=' + this.taskInfo.type + '&isReward=' + 1 +
						'&rewardTitle=' + this.shareInfo.title
				} else {
					pathTo = pathTo + '?id=' + this.fbInfo.id
				}
				this.toPage(pathTo)
			},
			getPath() {
				let taskType = Number(this.taskInfo.type)
				if ([1, 2].includes(taskType)) {
					return '/pages/details/askRent/askRent'
				} else if ([0, 8].includes(taskType)) {
					return '/pages/details/shopRent/shopRent'
				} else if (taskType == 3) {
					return '/pages/details/recruitWorkers/recruitWorkers'
				} else if (taskType == 4) {
					return '/pages/details/merchantService/merchantService'
				} else if (taskType == 5) {
					return '/pages/details/unused/unused'
				} else if (taskType == 6) {
					return '/pages/details/supplyChain/supplyChain'
				} else if (taskType == 7) {
					return '/pages/details/jobHunting/jobHunting'
				} else if (taskType == 9) {
					return '/pages/details/askSupply/askSupply'
				}
			},
			getType() {
				let dic = {
					0: 1,
					1: 6,
					2: 7,
					3: 5,
					4: 3,
					5: 2,
					6: 4
				}
				console.log('this.taskInfo.type', this.taskInfo.type)
				return dic[this.taskInfo.type];
			}

		}

	}
</script>

<style lang="scss">
	.header-bg {
		width: 100%;
		height: 82rpx;
		background: #EE212D;
		position: relative;
	}

	.list {
		position: relative;
		padding: 30rpx;
		top: -60rpx;
	}

	.offer-box {
		border-radius: 10rpx;
		background: rgba(255, 255, 255, 1);
		margin-bottom: 24rpx;
	}

	.offer-title-red {
		padding: 30rpx;
		font-size: 40rpx;
		font-weight: 500;
		color: rgba(238, 33, 45, 1);
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}

	.offer-title-block {
		padding: 30rpx;
		font-size: 40rpx;
		font-weight: 500;
		color: rgba(238, 33, 45, 1);
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}

	.offer-info {
		padding: 30rpx;

		.title {
			font-size: 30rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: rgba(0, 0, 0, 1);
			padding-bottom: 30rpx;
		}

		.pic {
			width: 170rpx;
			height: 144rpx;
			background: #f5f5f5;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.info-txt {
			padding-left: 12rpx;
			width: calc(100% - 170rpx);
			height: 144rpx;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(128, 128, 128, 1);
		}
	}

	.info-box {
		padding: 30rpx;

		.title {
			padding: 30rpx 0;
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
		}

		.label {
			width: 140rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 56rpx;
			color: rgba(166, 166, 166, 1);
		}

		.text {
			width: calc(100% - 140rpx);
			font-size: 28rpx;
			font-weight: 400;
			line-height: 56rpx;
			color: rgba(56, 56, 56, 1);
		}
	}

	.footer {
		width: 100%;
		padding: 30rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		.white-btn {
			width: 200rpx;
			height: 68rpx;
			opacity: 1;
			border-radius: 50rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 68rpx;
			color: rgba(128, 128, 128, 1);
			text-align: center;
		}

		.red-btn {
			width: 200rpx;
			height: 68rpx;
			opacity: 1;
			border-radius: 50rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 68rpx;
			color: rgba(255, 255, 255, 1);
			margin-left: 24rpx;
			text-align: center;
		}

	}

	.main-content {
		padding: 0 30rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);

		.main-tittle {
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			padding: 24rpx 0 18rpx 0;

			.tittle-left {
				font-size: 30rpx;
				width: 75%;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}

			.tittle-right {
				width: 20%;
				line-height: 44rpx;
				height: 44rpx;
				border-radius: 10rpx;
				background: rgba(238, 33, 45, 1);
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
			}
		}

		.mian-center {
			padding: 14rpx 0 20rpx 0;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);

			.center-left {
				p {
					font-size: 24rpx;
					line-height: 40rpx;
					color: rgba(128, 128, 128, 1);
				}
			}

			.center-right {
				font-size: 24rpx;
				color: rgba(238, 33, 45, 1);
			}
		}

		.main-bottom {
			margin-top: 28rpx;

			.bottom-btn {
				width: 90rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				color: rgba(128, 128, 128, 1);
				border-radius: 4rpx;
				border: 2rpx solid rgba(229, 229, 229, 1);
				margin-bottom: 32rpx;
			}
		}
	}
</style>